<template>
	<div class="lAL" >
		<!-- <fullscreen :fullscreen.sync="fullscreen"></fullscreen> -->
		<img class="login" src="../../assets/lai.png" />
		<i class="el-icon-rank fang" @click="full"></i>
		<div class="dis">
			<div class="left" :style="{background: color}">
				<div class="img">
					<img :src="src" />
				</div>
				<div class="qrCodeText">使用微信或知鸟扫描二维码加入</div>
			</div>
			<div class="right" :style="{background: color1 ,color: '#ffffff'}">
				<div>{{numb || 0}} 个学生加入等待开始...</div>
				<div class=" flex lAL_BOTTOM">
					<div style="position: relative;" v-for="(item,index) in dataImgUrl" :key="index">
						<img class="tou_img" :src="item.img" />
						<div class="el-icon-caret-bottom icon"></div>
						<div class="name">{{item.name}}</div>
					</div>
					
				</div>
				<div class="beginGame pointer" @click="start()">
					<span class="beginGameText">马上开始</span>
					<i class="el-icon-caret-right"></i>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	// import fullscreen from 'vue-fullscreen'
	export default {
		// components:{fullscreen},
		data() {
			return {
				fullscreen:false,
				color:'#5a77c3',
				color1:'#a27ced',
				numb:'',
				src:'',
				dataImgUrl:[
					{img:'https://pic1.zhimg.com/80/v2-28ba780f28661ffeab53db6957eabecd_720w.jpg',name:'桑桑'},
				],
				// 倒计时
				timer:null,
				totalTime:6
			}
		},
		mounted() {
			// setTimeout(() => {
			// 	this.cleacht()
			// },7000)template
			this.codeTime()
		},
		created() {
			
			
		},
		methods: {
			codeTime(){
				this.loadIing() //启动定时器
				this.timer = setInterval(() =>{
					//创建定时器
					console.log('定时器开始工作',this.totalTime)
					if(this.totalTime === 0) {
						//关闭定时器
						this.cleacht()
						console.log('定时器开始工作',this.totalTime)
					} else {
						this.loadIing() //启动定时器
					}
					
				},4000)
			},
			//启动定时器
			loadIing(){
				this.totalTime--
				if(this.totalTime == 5){
					this.color = '#fe8b54'
					this.color1 = '#ffad85'
				} else if(this.totalTime == 4){
					this.color = '#52b5f6'
					this.color1 = '#8ccffc'
				} else if(this.totalTime == 3){
					this.color = '#8257dd'
					this.color1 = '#a975f1'
				} else if(this.totalTime == 2){
					this.color = '#e184cd'
					this.color1 = '#ffb8f0'
				} else if(this.totalTime == 1){
					this.color = '#ec6e62'
					this.color1 = '#ff9588'
				}
				else if(this.totalTime == 0){
					this.color = '#3b74e7'
					this.color1 = '#6394f3'
					setTimeout(()=>{
						this.totalTime = 6
						this.codeTime()
					},3000)
				}
			},
			//关闭定时器
			cleacht(){
				clearInterval(this.timer)
				this.timer = null
				console.log('没清楚到')
			},
			//马上开始
			start(){
				console.log('gdfgdfn')
				if(this.dataImgUrl.length<0){
					this.$message.error('没有人加入游戏')
				} else {
					this.cleacht()
					this.$router.push({
						path:'/start',
						id:1
					})
				}
			},
			//放大全屏
			full(){
				let element = document.documentElement;
				if (this.fullscreen) {
					if (document.exitFullscreen) {
						document.exitFullscreen();
					} else if (document.webkitCancelFullScreen) {
						document.webkitCancelFullScreen();
					} else if (document.mozCancelFullScreen) {
						document.mozCancelFullScreen();
					} else if (document.msExitFullscreen) {
						document.msExitFullscreen();
					}
				} else {
					if (element.requestFullscreen) {
						element.requestFullscreen();
					} else if (element.webkitRequestFullScreen) {
						element.webkitRequestFullScreen();
					} else if (element.mozRequestFullScreen) {
						element.mozRequestFullScreen();
					} else if (element.msRequestFullscreen) {
					// IE11
						element.msRequestFullscreen();
					}
				}
				this.fullscreen = !this.fullscreen;
				
			},
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.beginGame {
	    width: 288px;
		background:  #fecf4b;
	    height: 70px;
	    font-size: 28px;
	    line-height: 70px;
	    box-shadow: 0 0.2em #e29a5a;
	    color: #FFFFFF;
	    border-radius: 0.4em;
	    background-size: 6% 36%;
	    margin: 250px auto ;
	}
	.lAL_BOTTOM{
		padding: 45px;
		.name{
			position: absolute;
			margin-left: 42px;
			font-size: 25px;
		}
	}
	.icon{
		position: absolute;
		bottom: -10px;
		right: 30px;
	}
	.tou_img{
		width: 80px;
		height: 80px;
		border-radius: 50%;
		border: 4px solid #FFFFFF;
		margin-left: 25px;
	}
	.left{
		width: 26%;
		height: 100%;
		z-index: 55;
		left: 0;
		position: absolute;
		// display: flex;
		text-align: center;
		.img{
			margin-top: 55%;
			width: 55%;
			height: 28%;
			background-color: #FFFFFF;
			padding: 20px;
			margin-left: 19%;
			margin-bottom: 25px;
			img{
				width: 100%;
				height: 100%;
			}
		}
		.qrCodeText {
		    font-size: 16px;
		    color: #FFFFFF;
		}
	}
	.right{
		width: 74%;
		height: 100%;
		text-align: center;
		font-size: 30px;
		padding-top: 80px;
		z-index: 55;
		right: 0;
		position: absolute;
	}
	.lAL{
		width: 100%;
		height: 100%;
		position: fixed;
	}
	.login{
		position: absolute;
		z-index: 100;
		top: 40px;
		left: 40px;
		width: 120px;
		height: 40px;
	}
	.fang{
		width: 60px;
		height: 60px;
		position: absolute;
		right: 10px;
		top: 40px;
		z-index: 100;
		color: #FFFFFF;
		font-size: 30px;
	}
</style>
